<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <script th:src="@{/js/vue/vue.js}"></script>
    <th:block th:include="include :: header('文章列表')"/>
</head>
<style>
    /* 设置表头字体大小 */
    .table-striped .table>thead>tr>th, .table-striped .table>tbody>tr>th {
        border-bottom: 1px solid #ccc !important;
        border-top: 0px !important;
        font-weight: normal;
        font-size: 20px;
    }
    /* 设置表格整体字体大小 */
    .table {
        font-size: 20px; /* 可以根据需要调整字体大小 */
    }
    .homeTitle {
        /*padding-top: 17%;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        text-align: center;
        font-size: 160px;
        font-weight: 1000;
        text-shadow: 1px 0px #990000, 1px 2px #660000, 3px 1px #990000,
        2px 3px #660000, 4px 2px #990000, 4px 4px #660000,
        5px 3px #990000, 5px 5px #660000, 7px 4px #990000,
        6px 6px #660000, 8px 5px #990000, 7px 7px #660000,
        9px 6px #990000, 9px 8px #660000, 11px 7px #990000;
    }

    .selectButten {
        width: 72px;
        border: none;
        height: 100%;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #c5464a;
        /*border-radius: 0px 19px 19px 0px;*/
        color: white
    }


    .search input {
        width: 100%;
        height: 42px;
        padding-left: 13px;
        border: 2px solid #c5464a;
        /*border-radius: 19px; !*border-radius 属性用于向元素添加圆角边框：*!*/
        /*background: transparent; !*背景透明*!*/
    }

    .search button {
        height: 42px;
        width: 72px;
        cursor: pointer; /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
        /*position: absolute;*/
        background: #c5464a;
        border-radius: 0 19px 19px 0;
        width: 60px;
        right: 0;
    }

    .search button:hover {
        background-color: #c7585c; /*点击搜索按钮时的背景颜色*/
    }

    /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
    .search button:before {
        content: "搜索"; /*插入的内容*/
        font-size: 13px; /*插入内容的字体大小*/
        color: #F9F0DA; /*插入内容的字体颜色*/
    }

    .menu {
        color: white;
        font-size: 30px;
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        width: 100%;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 7% /* 让 .menu 容器占满整个视口高度 */
    }

    .menu > div {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .menu > div > div {
        margin: 0 80px; /* 为子元素添加左右间距 */
    }


    .menu > div > div {
        margin: 0 80px;
        color: white;
        cursor: pointer; /* 鼠标悬停时显示指针样式 */
    }

    .menu > div > div:hover {
        font-weight: bold;
        color: #734000;
    }
</style>
<body class="gray-bg">

<div style="width: 100%;height: 100%;background-color: #e6a44c;overflow: hidden" class="hame" id="home">

    <!--    <div th:text="${literature}">-->
    <!--    </div>-->
    <!-- 菜单 -->
    <div class="menu" style="position: fixed;top: 0">
        <div style="display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;">
            <div class="goToMyPage" data-target="homepage" @click="getoHome()"> 首页</div>
            <div>文献数据库</div>
            <div @click="goToFilmDate()">影视信息库</div>
            <div onclick="goToAboutMe()">关于我们</div>
        </div>
    </div>


    <div style="padding-top: 18%;" id="targetDiv">

        <!-- 标题-->
<!--        <div style="text-align: center;font-size: 37px;font-weight: bold;color: white">-->
<!--            <div>中国共产党人精神谱系</div>-->
<!--            <div>文献数据库</div>-->
<!--        </div>-->
        <div class="homeTitle" >
            <div style="font-size: 35px;letter-spacing: 10px;margin-bottom: 0%">中国共产党人精神谱系</div>
            <div style="font-size: 45px;letter-spacing: 10px;margin-bottom: 0%">文献数据库</div>
        </div>

        <form id="formId">


            <!-- 搜索框 -->
            <div style="display: flex; justify-content: center; margin-top: 60px;">
                <div class="search"
                     style="border: 2px solid #c5464a;font-size:25px;min-width: 950px; max-width: 950px;  display: flex; border-radius: 19px 19px 19px 19px;overflow: hidden">
                    <select  style="display: inline; padding-left: 4px; width: 14%;background-color: #ffffff ; border-radius: 15px 0 0 15px;border: none; outline: none;"
                            name="key" id="searchKeySelect">
                        <option style="display: inline;text-align: center" value="0" th:selected="${searchKey == '0'}">全文</option>
                        <option style="display: inline;text-align: center" value="1" th:selected="${searchKey == '1'}">标题</option>
                        <option style="display: inline;text-align: center" value="2" th:selected="${searchKey == '2'}">关键词</option>
                    </select>
                    <input style="border: none; outline: none" placeholder="请输入..." id="keywordInput"
                           name="searchTerms" type="text">
                    <div style="width:72px;" id="loadPapersBtn" onclick="getDate()">
                        <!--                        <button style="width:72px; border: none; outline: none"  onclick="selectArticle()"></button>-->
                        <div style="" class="selectButten" onclick="$.table.search()">搜索</div>
                    </div>
                </div>
            </div>


            <!--                        <input  class="time-input" placeholder="请选择年度" name="annual"  type="hidden"/>-->


        </form>


        <!-- 表格 -->
        <div id="myTableDiv" style="padding-left:50px;padding-right: 50px;padding-top: 50px;display: none">
            <div class="container-div">
                <div class="row">
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- 通用JS -->
<div >
    <script th:inline="javascript"> var ctx = [[@{/}]]; var lockscreen = [[${session.lockscreen}]]; if(lockscreen){window.top.location=ctx+"lockscreen";} </script>

    <script th:src="@{/js/jquery.min.js?v=3.6.3}"></script>
    <script th:src="@{/js/bootstrap.min.js?v=3.3.7}"></script>
    <!-- bootstrap-table 表格插件 -->
    <script th:src="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.18.3}"></script>
    <script th:src="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.18.3}"></script>
    <script th:src="@{/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.18.3}"></script>
    <!-- jquery-validate 表单验证插件 -->

    <!-- bootstrap-table 表格树插件 -->

    <!-- 遮罩层 -->
    <script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0}"></script>
    <script th:src="@{/ajax/libs/iCheck/icheck.min.js?v=1.0.3}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js?v=3.5.1}"></script>
    <script th:src="@{/ajax/libs/layui/layui.min.js?v=2.7.5}"></script>
    <script th:src="@{/ruoyi/js/common.js?v=4.7.7}"></script>
    <script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.7}"></script>
</div>
<script th:inline="javascript">


    // 使用 Thymeleaf 内联表达式直接获取 literature 的值
    var literature = [[${literature}]];
    var searchKey = [[${searchKey}]];

    // function getoHome(){
    //     window.location.href = "/";
    // }

    // 将 literature 的值打印到控制台
    console.log(literature);


    // $(function () {

    // 获取输入框元素
    var inputElement = document.getElementById('keywordInput');
    // 给输入框赋值

    // console.log('输入框当前值:', inputElement);

    // if('notValue' === literature){
    //     inputElement.value = "literature";
    // }


    // 获取目标 div 元素
    // var targetDiv = document.getElementById('targetDiv');
    // // 判断 literature 是否不为 null
    // if (literature !== undefined && literature !== ' ') {
    //     // 修改 padding-top 样式
    //     targetDiv.style.paddingTop = '5%';
    // }
    // });


    // 文献表格
    var prefix = ctx + "front/article";
    var datas = [[${@dict.getType('sys_normal_disable')}]];

    // 定义点击事件处理函数
    function goToArticleDetail(id) {
        // 这里可以编写点击题名后的具体逻辑，例如弹出提示框显示题名
        // alert("2222")
        window.location.href = "/front/goToArticleDetail?id=" + encodeURIComponent(id);
    }

    function goToAboutMe(){
        window.location.href = "/front/goToAboutMe";
    }
    $(function () {
        // alert("你好"+literature)
        if(literature===''){
            const div = document.getElementById('myTableDiv');
            div.style.display = 'none';


            var targetDiv = document.getElementById('targetDiv');

                // 修改 padding-top 样式
                // targetDiv.style.paddingTop = '17%';

            return;
        }



        // 获取输入框元素
        var inputElement = document.getElementById('keywordInput');
        // 给输入框赋值
        inputElement.value = literature;

        // 获取目标 div 元素
        // var targetDiv = document.getElementById('targetDiv');
        // // 判断 literature 是否不为 null
        // if (literature !== null && literature !== '') {
        //     // 修改 padding-top 样式
        //     targetDiv.style.paddingTop = '5%';
        // }


        var options = {
            url: prefix + "/selectArticle?text=" + literature + "&" + "key=" + searchKey,
            showSearch: false, // 隐藏搜索框
            showRefresh: false, // 隐藏刷新按钮
            showToggle: false, // 隐藏视图切换按钮
            showColumns: false, // 隐藏列选择按钮
            pagination: true, // 开启分页
            pageList: [], // 不显示每页记录数选择框
            showPaginationSwitch: false, // 隐藏切换分页显示的按钮
            pageSize: 7,
            columns: [
                //     {
                //     checkbox: true
                // },
                // {
                //     field: 'srcDatabase',
                //     title: '来源库',
                //     cellStyle: function (value, row, index) {
                //         return {
                //             css: {
                //                 'white-space': 'nowrap'
                //             }
                //         };
                //     }
                // },
                {
                    field: 'title',
                    title: '题名',
                    formatter: function (value, row, index) {
                        // 创建一个带有点击事件的 a 标签
                        return '<a href="javascript:void(0);" onclick="goToArticleDetail(\'' + row.id + '\')">' + value + '</a>';
                    },
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                'white-space': 'nowrap'
                            }
                        };
                    }
                },
                {
                    field: 'author',
                    title: '作者',
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                'white-space': 'nowrap'
                            }
                        };
                    }
                },
                // {
                //     field: 'organ',
                //     title: '单位',
                //     cellStyle: function (value, row, index) {
                //         return {
                //             css: {
                //                 'white-space': 'nowrap'
                //             }
                //         };
                //     }
                // },
                {
                    field: 'source',
                    title: '文献来源',
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                'white-space': 'nowrap'
                            }
                        };
                    }
                },
                {
                    field: 'keyword',
                    title: '关键词',
                    // cellStyle: function (value, row, index) {
                    //     return {
                    //         css: {
                    //             'white-space': 'nowrap'
                    //         }
                    //     };
                    // }
                },
                // {
                //     field: 'summary',
                //     title: '摘要'
                // },
                // {
                //     field: 'articleText',
                //     title: '链接',
                //     formatter: function(value, row, index) {
                //         // 如果 articleText 有值，则创建一个 a 标签链接
                //         if (value) {
                //             return '<a href="' + value + '" target="_blank">跳转链接</a>';
                //         }
                //         return '';
                //     },
                //     cellStyle: function (value, row, index) {
                //         return {
                //             css: {
                //                 'white-space': 'nowrap'
                //             }
                //         };
                //     }
                // },
                {
                    field: 'pubTime',
                    title: '发表时间',
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                'white-space': 'nowrap'
                            }
                        };
                    }
                }
            ]
        };
        $.table.init(options);

    });
















    function getDate () {
        // alert("你好"+literature)
        // if(literature===''){
        //     return;
        // }

        const div = document.getElementById('myTableDiv');
        var targetDiv = document.getElementById('targetDiv');

        // 修改 padding-top 样式
        targetDiv.style.paddingTop = '5%';
        div.style.display = 'block';

        // 获取输入框元素
        var inputElement = document.getElementById('keywordInput');
        // 给输入框赋值
        // inputElement.value = literature;

        console.log(inputElement.value)

        // 获取目标 div 元素
        // var targetDiv = document.getElementById('targetDiv');
        // // 判断 literature 是否不为 null
        // if (literature !== null && literature !== '') {
        //     // 修改 padding-top 样式
        //     targetDiv.style.paddingTop = '5%';
        // }


        var options = {
            url: prefix + "/selectArticle?text=" + inputElement.value + "&" + "key=" + searchKey,
            showSearch: false, // 隐藏搜索框
            showRefresh: false, // 隐藏刷新按钮
            showToggle: false, // 隐藏视图切换按钮
            showColumns: false, // 隐藏列选择按钮
            pagination: true, // 开启分页
            pageList: [], // 不显示每页记录数选择框
            showPaginationSwitch: false, // 隐藏切换分页显示的按钮
            pageSize: 7,
            columns: [
                //     {
                //     checkbox: true
                // },
                // {
                //     field: 'srcDatabase',
                //     title: '来源库',
                //     cellStyle: function (value, row, index) {
                //         return {
                //             css: {
                //                 'white-space': 'nowrap'
                //             }
                //         };
                //     }
                // },
                {
                    field: 'title',
                    title: '题名',
                    formatter: function (value, row, index) {
                        // 创建一个带有点击事件的 a 标签
                        return '<a href="javascript:void(0);" onclick="goToArticleDetail(\'' + row.id + '\')">' + value + '</a>';
                    },
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                'white-space': 'nowrap'
                            }
                        };
                    }
                },
                {
                    field: 'author',
                    title: '作者',
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                'white-space': 'nowrap'
                            }
                        };
                    }
                },
                // {
                //     field: 'organ',
                //     title: '单位',
                //     cellStyle: function (value, row, index) {
                //         return {
                //             css: {
                //                 'white-space': 'nowrap'
                //             }
                //         };
                //     }
                // },
                {
                    field: 'source',
                    title: '文献来源',
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                'white-space': 'nowrap'
                            }
                        };
                    }
                },
                {
                    field: 'keyword',
                    title: '关键词',
                    // cellStyle: function (value, row, index) {
                    //     return {
                    //         css: {
                    //             'white-space': 'nowrap'
                    //         }
                    //     };
                    // }
                },
                // {
                //     field: 'summary',
                //     title: '摘要'
                // },
                // {
                //     field: 'articleText',
                //     title: '链接',
                //     formatter: function(value, row, index) {
                //         // 如果 articleText 有值，则创建一个 a 标签链接
                //         if (value) {
                //             return '<a href="' + value + '" target="_blank">跳转链接</a>';
                //         }
                //         return '';
                //     },
                //     cellStyle: function (value, row, index) {
                //         return {
                //             css: {
                //                 'white-space': 'nowrap'
                //             }
                //         };
                //     }
                // },
                {
                    field: 'pubTime',
                    title: '发表时间',
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                'white-space': 'nowrap'
                            }
                        };
                    }
                }
            ]
        };
        $.table.init(options);

    };

















    function footerStyle(column) {
        return {
//         	    userBalance: {
//         	        classes: 'class'
//         	    },
            userBalance: {
                css: {color: 'red', 'font-weight': 'normal'}
            }
        }[column.field]
    }

    function selectArticle() {
        // 获取 select 元素的值
        var searchKey = document.getElementById('searchKeySelect').value;
        // 获取 input 元素的值
        var searchTerms = document.getElementById('keywordInput').value;

        console.log("2222")
        // 构建请求 URL
        var prefix = ctx + "front/article";
        var url = prefix + "/selectArticle?key=" + searchKey + "&searchTerms=" + encodeURIComponent(searchTerms);

        var options = {
            url: url,
            columns: [
                {
                    field: 'srcDatabase',
                    title: '来源库'
                },
                {
                    field: 'title',
                    title: '题名',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:void(0);" onclick="goToArticleDetail(\'' + row.id + '\')">' + value + '</a>';
                    }
                },
                {
                    field: 'author',
                    title: '作者'
                },
                {
                    field: 'organ',
                    title: '单位'
                },
                {
                    field: 'source',
                    title: '文献来源'
                },
                {
                    field: 'keyword',
                    title: '关键词'
                },
                {
                    field: 'summary',
                    title: '摘要'
                },
                {
                    field: 'articleText',
                    title: '链接',
                    formatter: function(value, row, index) {
                        // 如果 articleText 有值，则创建一个 a 标签链接
                        if (value) {
                            return '<a href="' + value + '" target="_blank">点击跳转...</a>';
                        }
                        return '';
                    }
                },
                {
                    field: 'pubTime',
                    title: '发表时间'
                }
            ]
        };
        $.table.init(options);

        this.isShowTable = "true"
    }

    new Vue({
        el: '#home',
        data: {
            isShowTable: literature,

        },
        methods: {

            getoHome() {
                window.location.href = "/";
            },

            goToFilmDate() {
                window.location.href = "/front/goToFilmDate";
            },


        },


        mounted() {

        },
        created() {
        },

    });


    // =================== vue =======================


</script>

</body>



</html>